<template>
  <mu-dialog transition="slide-right" fullscreen :open.sync="openFullscreen">
    <div class="p-box">
      <div class="p-header">
        <mu-appbar color="primary" class="lan-header">
          <mu-button icon slot="left" @click="close">
            <i class="iconfont angle-left iconangle-left"></i>
            <span class="lan-header-back">返回</span>
          </mu-button>
          {{title}}
          <mu-button icon slot="right" @click="clear">
            <span class="text">清空</span>
          </mu-button>
        </mu-appbar>
      </div>
      <div class="p-content">
        <!-- <div class="m-form">
          <div class="m-form-item">
            <label class="m-form-item_label">开始时间</label>
            <div class="m-form-item_content">
              <mu-date-input v-model="form.startTime" container="bottomSheet" ></mu-date-input>
              <i class="iconfont angle-left iconangle-right"></i>
            </div>
          </div>
        </div>-->
        <div class="lan-dialog-body" style="background:#fff">
          <mu-form
            ref="form"
            :model="form"
            class="mu-lan-form"
            :label-position="'left'"
            label-width="28%"
          >
            <mu-form-item label="项目名称" class="required">
              <mu-text-field
                v-model="form.projectName"
                container="bottomSheet"
                placeholder="请选择"
                :readonly="true"
              ></mu-text-field>
              <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="所属区域" class="required">
              <mu-text-field
                @click="showAreaModal"
                v-model="form.areaName"
                container="bottomSheet"
                placeholder="请选择"
                :readonly="true"
              ></mu-text-field>
              <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="责任单位" class="required">
              <!--   -->
              <mu-select v-model="form.deptId" placeholder="请选择" popover-class="lan-popover-select">
                <mu-option
                  v-for="(list,index) in unitList"
                  :key="index"
                  :label="list.name"
                  :value="list.id"
                ></mu-option>
              </mu-select>
              <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="平面图标点" class="required">
              <!--  :disabled="existPointsTotal>=60" -->
              <mu-text-field
                placeholder="请选择"
                @click="markInputClick"
                v-model="form.pointStr"
                container="bottomSheet"
                :readonly="true"
              ></mu-text-field>
              <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
          </mu-form>
        </div>
      </div>
      <div class="p-footer">
        <mu-button full-width color="primary" @click="confirm">确认</mu-button>
      </div>
    </div>
    <dialogMarkPoint ref="dialogMarkPoint" v-bind="$attrs" @getPoints="getPoints" :type="mapType" />
    <selectArea ref="selectArea" :projectId="form.projectId" @selectdArea="selectdArea" />
  </mu-dialog>
</template>
<script>
import { MessageBox } from "mint-ui";
import dialogMarkPoint from "@/realMeasureModule/taskMode/taskModeRealMeasure/dialogMarkPoint";
import selectArea from "@/realMeasureModule/taskMode/taskModeRealMeasure/selectArea";
export default {
  name: "dialogAddTask",
  components: {
    dialogMarkPoint,
    selectArea
  },
  props: {},
  data() {
    return {
      editId: "",
      openFullscreen: false,
      openConfirm: false,
      unitList: [],
      mapType: "",
      isArea: false,
      title: "新建点位",
      areaObj: {
        id: "",
        name: ""
      },
      taskList: [],
      mapObj: {
        points: [],
        url: ""
      },
      areaImage: "",
      existPointsTotal: "",
      form: {
        projectName: "",
        projectId: "",
        areaName: "",
        areaId: "",
        deptName: "",
        deptId: "",
        pointStr: "",
        pointArray: []
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    openMe() {
      this.openFullscreen = true;
    },
    async init(data) {
      this.title =  "新建点位"
      if (data) {
        this.isArea = true;
        this.areaObj = data;
        this.form.areaName = this.areaObj.name;
        this.form.areaId = this.areaObj.id;
        this.existPointsTotal = 0;
      } else {
        this.isArea = false;
        this.form.areaName = "";
        this.form.areaId = "";
      }
      this.openFullscreen = true;
      this.form.projectName = this.$attrs.currentProject.name;
      this.form.projectId = this.$attrs.currentProject.id;
      var list = await this.$A.comData("employeeList", {
        category: null,
        projectId: this.form.projectId
      });
      if (list.length) {
        this.unitList = list;
      } else {
        this.unitList = [{ name: "暂无数据", id: "" }];
      }
      this.getAreaUnit();
    },
    getUnitList() {
      let obj = {
        pageNo: -1,
        pageSize: 0,
        obj: {
          category: null,
          projectId: this.form.projectId
        }
      };
      this.$A.Go("post", "/safety/corp/", obj).then(res => {
        if (res.body && res.body.length) {
          this.unitList = res.body;
        } else {
          this.unitList = [{ name: "暂无数据", id: "" }];
        }
      });
    },
    getAreaUnit() {
      if (this.form.areaId) {
        this.$A
          .Go("get", "/safety/projectArea/detail", { id: this.form.areaId })
          .then(res => {
            this.$closeLoading();
            if (res.code == 200) {
              this.form.deptId =
                res.data && res.data.corpId ? res.data.corpId : "";
              this.areaImage = res.body.photoUrl;
            } else {
              this.form.deptId = "";
            }
          });
      }
    },
    selectdArea(area) {
      // if (this.form.areaId == area.id) {
      //   return;
      // }
      this.mapType = ''
      this.form.areaName = area.name;
      this.form.areaId = area.id;
      this.getAreaUnit();
      let params = {
        projectId: this.form.projectId,
        areaId: this.form.areaId
      };
      this.form.pointStr = "";
      this.form.pointArray = [];
      this.$A.Go("get", "/safety/measureTask/dataList", params).then(res => {
        this.$closeLoading();
        if (res.code == 200) {
          this.taskList = res.body && res.body.length ? res.body : [];
        } else {
          this.taskList = [];
        }
      });
      this.$openLoading();
      this.$A
        .Go("get", "/safety/measureTask/getPointListByAreaId", {
          areaId: this.form.areaId
        })
        .then(res => {
          this.$closeLoading();
          if (res.code == 200) {
            this.existPointsTotal = res.body.length;
            if (this.existPointsTotal >= 60) {
              this.$A.MS("该区域下已经有60个点，不可新增任务");
            }
          } else {
          }
        });
    },
    close() {
      this.title = "新增实测任务";
      this.openFullscreen = false;
      this.clear();
      this.unitList = [];
    },
    clear() {
      this.form = {
        projectName: this.$attrs.currentProject.name,
        projectId: this.$attrs.currentProject.id,
        areaName: this.isArea ? this.areaObj.name : "",
        areaId: this.isArea ? this.areaObj.id : "",
        deptName: "",
        deptId: "",
        pointStr: "",
        pointArray: []
      };
    },
    //
    showAreaModal() {
      if (this.isArea) {
        return;
      }
      this.$refs.selectArea.init();
    },
    showMarkModal(data) {
      //平面图标点
      this.$refs.dialogMarkPoint.init(data);
    },
    markInputClick() {
      if (!this.form.areaId) {
        this.$A.MS("请选择区域");
      } else {
        if (this.taskList.length) {
          if(!this.mapType){//第一次
              MessageBox({
              message: "该区域已标记点位，是否进行编辑？",
              showCancelButton: true,
              showConfirmButton: true,
              confirmButtonText: "是，进行编辑",
              cancelButtonText: "否，新建点位"
            })
              .then((value, action) => {
                if (value == "confirm") {
                  if (this.taskList.length == 1) {
                    //打开平面图标记点
                    let onePoint = this.taskList[0];
                    this.mapType = "edit";
                    this.title = "编辑实测任务";
                    this.editId = onePoint.id;
                    this.showMarkModal({
                      points: onePoint.pointList,
                      measurePointVoList:onePoint.pointList,
                      url: onePoint.photoUrl,
                      existPointsTotal:
                        Number(this.existPointsTotal) - onePoint.pointList.length
                    });
                  } else {
                    //新页面
                    if (!this.form.deptId) {
                      this.$A.MS("请选择责任单位");
                    } else {
                      this.$router.push({
                        name: "StartEdit",
                        query: {
                          projectId: this.form.projectId,
                          areaId: this.form.areaId,
                          deptId: this.form.deptId
                        }
                      });
                      this.openFullscreen = false;
                    }

                    // this.close();
                  }
                } else {
                  this.getImage();
                }
              })
              .catch(err => {});
          }else{ //this.form.pointArray
              if(this.mapType == 'add'){
                this.getImage(this.form.pointArray);
              }else{
                this.$router.push({
                  name: "StartEdit",
                  query: {
                    projectId: this.form.projectId,
                    areaId: this.form.areaId,
                    deptId: this.form.deptId
                  }
                });
                this.openFullscreen = false;
              }
          }
          
        } else {
          //不存在任何点
          this.getImage();
        }
      }
    },
    closeConfirmDialog() {
      this.openConfirm = false;
    },
    confirmSkip() {},
    getPoints(points) {
      if (points.length) {
        this.form.pointStr = "已标记";
        this.form.pointArray = points;
      } else {
        this.form.pointStr = "";
        this.form.pointArray = [];
      }
    },
    getImage(list) {
      this.mapType = "add";
      console.log(list)
      this.showMarkModal({
        points: list || [],
        measurePointVoList:list || [],
        url: this.areaImage,
        existPointsTotal: this.existPointsTotal
      });
    },
    //点击确定
    confirm() {
      if (!this.form.projectId) {
        this.$A.MS("请选择项目");
        return;
      }
      if (!this.form.areaId) {
        this.$A.MS("请选择区域");
        return;
      }
      if (!this.form.deptId) {
        this.$A.MS("请选择责任单位");
        return;
      }
      if (!this.form.pointStr) {
        this.$A.MS("请选择点位");
        return;
      }
      let postPoints = [];
      this.form.pointArray.forEach(item => {
        postPoints.push(`${item.left},${item.top}`);
      });
      let params = {
        areaId: this.form.areaId, //区域id
        deptId: this.form.deptId, //单位id
        point: JSON.stringify(postPoints), //点位坐标(传递坐标集合)
        projectId: this.form.projectId //项目Id
      };
      this.$openLoading();
      let url = "";
      if (this.mapType == "edit") {
        url = "/safety/measureTask/edit";
        params.id = this.editId;
      } else {
        url = "/safety/measureTask/add";
      }
      this.$A.Go("post", url, params).then(res => {
        this.$closeLoading();
        if (res.code == 200) {
          this.openFullscreen = false;
          this.mapType == "edit"
            ? this.$A.MS("编辑成功")
            : this.$A.MS("添加成功");
        }
      });
    },
    //不可选择的开始日期
    disabledStartDates(date) {
      if (this.form.endTime) {
        return date.getTime() > new Date(this.form.endTime).getTime();
      } else {
        return false;
      }
    },
    //不可选择的结束日期
    disabledEndDates(date) {
      if (this.form.startTime) {
        return date.getTime() < new Date(this.form.startTime).getTime();
      } else {
        return false;
      }
    }
  },
  destroyed() {}
};
</script>
<style lang="less">
</style>